<template>
	<view class="coupon-container">
		<!-- 优惠券状态切换标签 -->
		<view class="tab-container">
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'available' }" 
				@click="switchTab('available')"
			>
				<text>可使用</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'used' }" 
				@click="switchTab('used')"
			>
				<text>已使用</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'expired' }" 
				@click="switchTab('expired')"
			>
				<text>已过期</text>
			</view>
		</view>
		
		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<view 
				class="coupon-item" 
				v-for="(item, index) in couponList" 
				:key="index"
				:class="{ disabled: item.status !== 'available' }"
			>
				<view class="coupon-left">
					<view class="coupon-amount">
						<text class="currency">¥</text>
						<text class="amount">{{ item.amount }}</text>
					</view>
					<view class="coupon-condition">
						满{{ item.minAmount }}元可用
					</view>
				</view>
				
				<view class="coupon-divider"></view>
				
				<view class="coupon-right">
					<view class="coupon-title">{{ item.title }}</view>
					<view class="coupon-time">{{ item.validTime }}</view>
					<view class="coupon-desc">{{ item.description }}</view>
				</view>
				
				<view class="coupon-status">
					<text v-if="item.status === 'available'" class="status-text available">可使用</text>
					<text v-else-if="item.status === 'used'" class="status-text used">已使用</text>
					<text v-else-if="item.status === 'expired'" class="status-text expired">已过期</text>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="couponList.length === 0 && !loading">
				<image src="/static/empty-coupon.png" class="empty-image"></image>
				<text class="empty-text">暂无优惠券</text>
				<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
	data() {
		return {
			currentTab: 'available', // 当前标签：available-可使用，used-已使用，expired-已过期
		}
	},
	computed: {
		...mapGetters('user', ['getIsLogin']),
		...mapGetters('coupon', ['getCouponList', 'getCouponLoading']),
		
		// 使用store中的优惠券列表
		couponList() {
			return this.getCouponList
		},
		
		// 使用store中的加载状态
		loading() {
			return this.getCouponLoading
		},
		
		// 当前登录状态
		isLogin() {
			return this.getIsLogin
		}
	},
	onLoad() {
		if (this.getIsLogin) {
			this.loadCouponList()
		}
	},
	onShow() {
		// 每次显示页面时刷新数据
		if (this.getIsLogin) {
			this.loadCouponList()
		}
	},
	methods: {
		...mapActions('coupon', ['fetchCouponList']),
		
		// 切换标签
		switchTab(tab) {
			this.currentTab = tab
			this.loadCouponList()
		},
		
		// 加载优惠券列表
		async loadCouponList() {
			if (!this.getIsLogin || this.loading) return
			
			try {
				// 调用store中的action获取优惠券列表
				await this.fetchCouponList({ 
					status: this.currentTab,
					page: 1,
					size: 20
				})
			} catch (error) {
				console.error('加载优惠券列表失败:', error)
				// 如果API调用失败，使用模拟数据作为后备
				this.couponList = this.getMockData(this.currentTab)
			}
		},
		
		// 获取模拟数据
		getMockData(status) {
			const mockData = {
				available: [
					{
						id: '1',
						title: '新用户专享优惠券',
						description: '仅限新用户首次下单使用',
						amount: 10,
						minAmount: 50,
						validTime: '2023.12.01-2023.12.31',
						status: 'available'
					},
					{
						id: '2',
						title: '满减优惠券',
						description: '全场通用，不限商品',
						amount: 20,
						minAmount: 100,
						validTime: '2023.12.01-2023.12.31',
						status: 'available'
					}
				],
				used: [
					{
						id: '3',
						title: '生日专享优惠券',
						description: '生日当月专享优惠',
						amount: 30,
						minAmount: 150,
						validTime: '2023.11.01-2023.11.30',
						status: 'used'
					}
				],
				expired: [
					{
						id: '4',
						title: '限时特惠优惠券',
						description: '限时特惠，过期不候',
						amount: 15,
						minAmount: 80,
						validTime: '2023.10.01-2023.10.31',
						status: 'expired'
					}
				]
			}
			
			return mockData[status] || []
		},
		
		// 去购物
		goShopping() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
}
</script>

<style>
.coupon-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.tab-container {
	display: flex;
	background-color: #fff;
	padding: 20rpx 0;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 10;
}

.tab-item {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
	position: relative;
}

.tab-item text {
	font-size: 28rpx;
	color: #666;
}

.tab-item.active text {
	color: #e93b3d;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #e93b3d;
	border-radius: 2rpx;
}

.coupon-list {
	flex: 1;
	padding: 20rpx;
}

.coupon-item {
	display: flex;
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.coupon-item.disabled {
	opacity: 0.6;
}

.coupon-left {
	flex: 0 0 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #fff2f0;
	padding: 30rpx 0;
}

.coupon-item.disabled .coupon-left {
	background-color: #f5f5f5;
}

.coupon-amount {
	display: flex;
	align-items: baseline;
	color: #e93b3d;
	margin-bottom: 10rpx;
}

.coupon-item.disabled .coupon-amount {
	color: #999;
}

.currency {
	font-size: 24rpx;
	margin-right: 5rpx;
}

.amount {
	font-size: 48rpx;
	font-weight: bold;
}

.coupon-condition {
	font-size: 24rpx;
	color: #e93b3d;
}

.coupon-item.disabled .coupon-condition {
	color: #999;
}

.coupon-divider {
	width: 2rpx;
	height: 100%;
	background: repeating-linear-gradient(
		to bottom,
		#fff,
		#fff 10rpx,
		#eee 10rpx,
		#eee 20rpx
	);
}

.coupon-right {
	flex: 1;
	padding: 30rpx;
	position: relative;
}

.coupon-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.coupon-time {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.coupon-desc {
	font-size: 24rpx;
	color: #666;
}

.coupon-status {
	position: absolute;
	top: 30rpx;
	right: 30rpx;
}

.status-text {
	font-size: 24rpx;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
}

.status-text.available {
	color: #e93b3d;
	background-color: #fff2f0;
}

.status-text.used {
	color: #999;
	background-color: #f5f5f5;
}

.status-text.expired {
	color: #999;
	background-color: #f5f5f5;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 40rpx;
}

.go-shopping-btn {
	background-color: #e93b3d;
	color: #fff;
	border-radius: 10rpx;
	font-size: 28rpx;
}
</style>